import React from 'react';
import { 
  Box, 
  Typography, 
  List, 
  ListItem, 
  ListItemText,
  Divider,
  Avatar,
  Chip
} from '@mui/material';
import { 
  Person as PersonIcon,
  Casino as CasinoIcon,
  TrendingUp as TrendingUpIcon,
  Call as CallIcon
} from '@mui/icons-material';

// 创建自定义的Fold图标
const FoldIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
  </svg>
);

// 创建自定义的AllIn图标
const AllInIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
  </svg>
);

interface GameAction {
  playerId: string;
  type: 'bet' | 'raise' | 'call' | 'fold' | 'check' | 'all-in';
  amount: number;
  timestamp: Date;
}

interface GameHistoryProps {
  actions: GameAction[];
}

const GameHistory: React.FC<GameHistoryProps> = ({ actions }) => {
  // 获取动作图标
  const getActionIcon = (action: string) => {
    switch (action) {
      case 'raise':
        return <TrendingUpIcon color="info" />;
      case 'call':
        return <CallIcon color="info" />;
      case 'fold':
        return <FoldIcon />;  // 简化图标，不设置颜色
      case 'check':
        return <PersonIcon color="success" />;
      case 'all-in':
        return <AllInIcon />;  // 简化图标，不设置颜色
      default:
        return null;
    }
  };

  const getActionText = (action: GameAction) => {
    switch (action.type) {
      case 'bet':
        return `下注 $${action.amount}`;
      case 'raise':
        return `加注到 $${action.amount}`;
      case 'call':
        return `跟注 $${action.amount}`;
      case 'fold':
        return '弃牌';
      case 'check':
        return '过牌';
      case 'all-in':
        return `全下 $${action.amount}`;
      default:
        return action.type;
    }
  };

  const formatTime = (date: Date) => {
    return date.toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
  };

  return (
    <Box sx={{ height: 300, overflow: 'auto' }}>
      {actions.length === 0 ? (
        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
          <Typography variant="body2" color="text.secondary">
            暂无游戏记录
          </Typography>
        </Box>
      ) : (
        <List dense>
          {actions.map((action, index) => (
            <React.Fragment key={index}>
              <ListItem alignItems="flex-start">
                <Avatar sx={{ mr: 1, bgcolor: 'background.paper', border: '1px solid', borderColor: 'divider' }}>
                  {getActionIcon(action.type)}
                </Avatar>
                <ListItemText
                  primary={
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                      <Typography variant="body2" component="span" fontWeight="bold">
                        {action.playerId}
                      </Typography>
                      <Typography variant="body2" component="span">
                        {getActionText(action)}
                      </Typography>
                      {action.amount > 0 && (
                        <Chip 
                          label={`$${action.amount}`} 
                          size="small" 
                          color={action.type === 'fold' ? 'default' : 'primary'} 
                          variant="outlined"
                        />
                      )}
                    </Box>
                  }
                  secondary={
                    <Typography variant="caption" color="text.secondary">
                      {formatTime(action.timestamp)}
                    </Typography>
                  }
                />
              </ListItem>
              {index < actions.length - 1 && <Divider variant="inset" component="li" />}
            </React.Fragment>
          ))}
        </List>
      )}
    </Box>
  );
};

export default GameHistory;